<template>
  <div id="app">

    <div class="OffDutyLayout">
      <div class="FunctionalArea">
        <el-row class="firstelrow" :gutter="20">
          <el-col :span="8">
            <div>
              <el-form label-width="100px">
                <el-form-item label="取件任务编号:">
                  <el-input placeholder="请输取件任务编号" />
                </el-form-item>
                <el-form-item label="预计完成时间:">
                  <el-date-picker
                    style="width: 265px;"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>

                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>

              </el-form>

            </div>
          </el-col>
          <el-col :span="8"><div>
            <el-form label-width="100px">
              <el-form-item label="订单编号:">
                <el-input placeholder="请输入订单编号" />

              </el-form-item>
              <el-form-item label="实际完成时间:">
                <el-date-picker
                  style="width: 265px;"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-form>
          </div>
          </el-col>
          <el-col :span="8"><div>
            <el-form label-width="100px">
              <el-form-item label="所属营业部">
                <el-select placeholder="请选所属营业部" />
              </el-form-item>
              <el-form-item label="任务分配状态">
                <el-select placeholder="请选择任务分配状态" />
              </el-form-item>
            </el-form>
          </div></el-col>
        </el-row>

        <div class="taskNavigationBar">

          <div id="plain" :class="{active:plain===0} " @click="plain=0">全部</div>
          <div id="plain" :class="{active:plain===1} " @click="plain=1">新任务</div>
          <div id="plain" :class="{active:plain===2} " @click="plain=2">已完成</div>
          <div id="plain" :class="{active:plain===3} " @click="plain=3">已取消</div>
        </div>
        <div class="LineListLargeBox">
          <div class="AddLineButton">
            <el-button type="primary">人工分配</el-button>

            <div class="eltab">
              <template>
                <el-table
                  height="100%"
                  stripe
                  :data="tableData"
                  style="width: 100%"
                  max-height="1600"
                >
                  <el-table-column width="50" type="selection" :selectable="selected" />

                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                  />
                  <el-table-column
                    prop="name"
                    label="取件作业编号"
                  />
                  <el-table-column
                    prop="province"
                    label="所在营业部"
                  />
                  <el-table-column
                    prop="city"
                    label="任务分配状态"
                    width="200"
                  />
                  <el-table-column
                    prop="address"
                    label="快递员姓名"
                  />
                  <el-table-column
                    prop="zip"
                    label="订单编号"
                    width="120"
                  />
                  <el-table-column
                    prop="zip"
                    label="预计开始时间"
                    width="120"
                  />
                  <el-table-column
                    prop="zip"
                    label="预计完成时间"
                  />
                  <el-table-column
                    prop="zip"
                    label="实际完成时间"
                    width="200"
                  />

                </el-table>
              </template>
            </div>
          </div>
          <div class="BottomPaging">
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            />
          </div>
        </div>

      </div>
    </div>
  </div>
  <!-- app-end -->
</template>

<script>

export default {
  components: {},
  data() {
    return {
      plain: 0,
      currentPage4: 1,
      yourValue: '测试',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]

    }
  },
  methods: {
    selected(row, index) {
      if (row.status === 1) { // 根据你的条件来设置
        return true // 可选择
      } else {
        return false // 不可选择
      }
    }
  }
}
</script>

<style scoped lang="scss">

.OffDutyLayout{
  padding: 20px;
.FunctionalArea{

.firstelrow{
padding: 20px 0;

border-radius: 8px;
background-color: #fff;
height: 200px;

// flex-direction: column;

}
.taskNavigationBar{
height: 52px;
background-color: #fff;
margin-top: 20px;
margin-left: -10px;
display: flex;

// align-items: center;
.active{
  color: rgb(225, 85, 54);
background-color: rgb(255, 238, 235);
}
#plain{
display: flex;
align-items: center;
justify-content: center ;
 width: 130px;
 height: 100%;
 font-size:15px
}
}
.LineListLargeBox{
  margin: 0 -10px;
  border-radius: 8px;
  margin-top: 20px;
  height: 744px;
  background-color: #fff;
  padding: 25px;
  .eltab{
    border: 1px solid rgba(177, 176, 176, 0.322);
    margin-top: 20px;
.VerticalBar{
margin:0 7px;
color:  rgba(177, 176, 176, 0.322);;
}
  }
  .BottomPaging{
    display: flex;
    justify-content: center;
   margin-top: 20px;
  }
}
}
}
</style>
